<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      v-model:activeFormData="formData"
      :columns="columns"
      :data-grid-title="dataGridTitle"
      :render-form-title="renderFormTitle"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-list-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #formSlot>
        <table class="dw-form-table">
          <tbody>
            <tr>
              <td class="dw-td-label"><span class="required">元素编码</span></td>
              <td>
                <el-form-item
                  prop="elementCode"
                  :rules="[
                    {
                      required: true,
                      message: '请填写元素编码!',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input v-model="formData.elementCode" placeholder="请输入元素编码..."></el-input>
                </el-form-item>
              </td>
              <td class="dw-td-label"><span class="required">元素名称</span></td>
              <td>
                <el-form-item
                  prop="elementName"
                  :rules="[
                    {
                      required: true,
                      message: '请填写元素名称!',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input v-model="formData.elementName" placeholder="请输入元素名称..."></el-input>
                </el-form-item>
              </td>
            </tr>

            <tr>
              <td class="dw-td-label"><span class="required">元素分类</span></td>
              <td>
                <el-form-item
                  prop="categoryCode"
                  :rules="[
                    {
                      required: true,
                      message: '请填写元素分类!',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <dict-selector dict-code="ELEMENT_CATEGORY_DICT" v-model="formData.categoryCode"></dict-selector>
                </el-form-item>
              </td>
              <td class="dw-td-label"><span class="required">排序号</span></td>
              <td>
                <el-form-item prop="sortNo" :rules="[]">
                  <el-input-number v-model="formData.sortNo"></el-input-number>
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </template>
    </dw-menu-datagrid-form>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IAddInfoHttpConfig, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';
import type { IElement } from './element';
defineOptions({
  name: 'SysElement',
});
const formData = ref<IElement>({
  id: '',
  categoryCode: '',
  categoryName: '',
  elementCode: '',
  elementName: '',
  elementMemo: '',
  sortNo: 1,
});

const dataGridTitle = '界面元素列表';
const renderFormTitle = (stateValue: 'add' | 'edit', data: IElement) => {
  if (stateValue === 'add') {
    return '界面元素信息';
  } else {
    return data.elementName;
  }
};
const columns = ref<IColumn[]>([
  {
    prop: 'elementCode',
    label: '元素编码',
    align: 'left',
  },
  {
    prop: 'elementName',
    label: '元素名称',
    align: 'left',
  },
  {
    prop: 'categoryName',
    label: '元素分类',
    align: 'left',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/sys/element/#{id}',
  delInfoMsgEmphasize: '#{elementName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/sys/element/list',
};
const getPageHttpConfig: IGetPageHttpConfig<IElement> = {
  url: '/admin-api/sys/element/page/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<IElement> = {
  url: '/admin-api/sys/element/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<IElement> = {
  url: '/admin-api/sys/element',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<IElement> = {
  url: '/admin-api/sys/element',
};
</script>
<style lang="scss" scoped></style>
